import React from 'react';
import { RoomStatus } from '../../../types/room';
import { RoomStatusManager } from '../utils/RoomStatusManager';
import styles from '../styles/EnhancedStatusIndicator.module.css';

interface EnhancedStatusIndicatorProps {
  status: RoomStatus;
  roomNumber?: string;
  size?: 'small' | 'medium' | 'large';
  showLabel?: boolean;
  showIcon?: boolean;
  showPulse?: boolean;
  onClick?: () => void;
  className?: string;
}

const EnhancedStatusIndicator: React.FC<EnhancedStatusIndicatorProps> = ({
  status,
  roomNumber,
  size = 'medium',
  showLabel = true,
  showIcon = true,
  showPulse = false,
  onClick,
  className,
}) => {
  const statusConfig = RoomStatusManager.getStatusConfig(status);

  // 动态样式类名
  const containerClasses = [
    styles.statusIndicator,
    styles[size],
    showPulse && styles.pulse,
    onClick && styles.clickable,
    className,
  ]
    .filter(Boolean)
    .join(' ');

  // 状态优先级（用于排序和重要性标识）
  const getPriorityLevel = (status: RoomStatus): number => {
    const priorityMap: Record<RoomStatus, number> = {
      [RoomStatus.OUT_OF_ORDER]: 1, // 最高优先级 - 需要立即处理
      [RoomStatus.MAINTENANCE]: 2,
      [RoomStatus.REPAIR]: 3,
      [RoomStatus.EQUIPMENT_REPLACEMENT]: 4,
      [RoomStatus.DEEP_MAINTENANCE]: 5,
      [RoomStatus.ROUTINE_MAINTENANCE]: 6,
      [RoomStatus.LOCKED]: 7,
      [RoomStatus.TEMPORARILY_UNAVAILABLE]: 8,
      [RoomStatus.DIRTY]: 9, // 清洁相关
      [RoomStatus.CLEANING]: 10,
      [RoomStatus.DEEP_CLEANING]: 11,
      [RoomStatus.INSPECTING]: 12,
      [RoomStatus.CLEANED]: 13,
      [RoomStatus.CHECKED_OUT]: 14, // 预订相关
      [RoomStatus.OCCUPIED]: 15,
      [RoomStatus.VIP_BOOKED]: 16,
      [RoomStatus.PARTIALLY_BOOKED]: 17,
      [RoomStatus.BOOKED]: 18,
      [RoomStatus.AVAILABLE]: 19, // 最低优先级 - 正常状态
    };
    return priorityMap[status] || 999;
  };

  const priority = getPriorityLevel(status);
  const isHighPriority = priority <= 8;
  const isMediumPriority = priority > 8 && priority <= 13;

  return (
    <div
      className={containerClasses}
      onClick={onClick}
      style={{
        backgroundColor: statusConfig.backgroundColor,
        borderColor: statusConfig.borderColor,
        color: statusConfig.color,
      }}
      title={`${roomNumber ? `${roomNumber} - ` : ''}${statusConfig.label}`}
    >
      {/* 优先级指示器 */}
      {isHighPriority && (
        <div className={styles.priorityBadge} data-priority='high'>
          🚨
        </div>
      )}
      {isMediumPriority && (
        <div className={styles.priorityBadge} data-priority='medium'>
          ⚠️
        </div>
      )}

      {/* 状态图标 */}
      {showIcon && (
        <span className={styles.statusIcon}>{statusConfig.icon}</span>
      )}

      {/* 状态文本 */}
      {showLabel && (
        <span className={styles.statusLabel}>
          {size === 'small' ? statusConfig.shortLabel : statusConfig.label}
        </span>
      )}

      {/* 房间号 */}
      {roomNumber && size !== 'small' && (
        <span className={styles.roomNumber}>{roomNumber}</span>
      )}

      {/* 脉冲动画效果 */}
      {showPulse && <div className={styles.pulseEffect} />}
    </div>
  );
};

export default EnhancedStatusIndicator;
